[00:00] In this lesson, we'll take a look at component properties. So we saw how to create components in the last video, but let's talk about those properties. Now in the lower left hand corner, by default, you'll find the vision property editor. And to make this a little bit easier to see for this one lesson, I'm actually going to drag on the title bar, and I'm actually going to just dock it over here just so we can kinda see what's going on. Now the way this thing works is that whatever component you have selected, so if I were to select my slider here, you can see that the property editor updated with properties for the slider. If I were to click on my LED display here, we now have properties for the LED display. So the contents of this panel is determined by whatever is selected. From this panel here, if we go and start changing the value on some of these properties, we can actually see those changes impacted on the component. So in the last video, we played around with the dial on the slider here by going into preview mode. But we could also, from the designer, simply type in a new value for the dial.

[01:02] So I could set this to 25, hit enter, and we can see that the slider's now at a value of 25. We can also change the maximum value, right? So instead of 100, it can be set to 200. And it has a whole bunch of tick marks as a result. Now, this isn't the entirety of properties on the component. Towards the top of the property editor here, the right most icon is actually a dropdown, which is a filter. If you click on the dropdown there, you can see a list of options. If I select all, it will then show all properties on whatever component I have selected. So we're not filtering or hiding any properties anymore. And there's a bunch of additional properties. For example, under behavior, there is an inverted property. So if we check that, then we can see that the dial goes in the opposite direction. Now beyond your numeric and Boolean properties, there are more complex properties. For example, if I were to select this label here, say I wanted to feel in the background on this label. So we could check the fill background setting here, and then pick a background color.

[02:05] So for the background color property, we can click this little dropdown over here, which allows us to pick from a selection of colors. We can also click the little icon just to the right of the dropdown, which gives us a color wheel of sorts. So we can actually go and pick individual colors, play with the alpha, or use any of these other tabs up here to select a color. Now in the property editor here, you'll notice that there is a little chain link icon on the right of most of these properties. That opens up the binding window. We talked about bindings a little bit in the last lesson when we created this LED display. We won't talk about these too much. Again, we'll look at bindings in a later lesson, but that's what the little chain link icon does. Now, sometimes, a value for a property is a little bit harder for us to give you a way to edit or show. So what we do in those cases is we usually give you an additional tool or piece of UI that allows you to do that. For example, if I were to create a list component, you can drag that onto our window here.

[03:04] So the point of the list is it basically just lists off a bunch of things. It's almost like a single column table. So how do I add data in here? Well, for the list component under the data and category properties, there's a data property which is a data set type. Because of this notation, I know it's a dataset type property. On the right hand side here, not the binding icon, but there's this little table with a magnifying glass. If I click on that, that opens up this data set editor where basically, I can configure what the contents of this more complex property has. So in this case, I could add a new column to this dataset. We give it a name. Select a data type. Click add column. And then I can add a couple of rows with this top button here. So let's just do 1, 2, 3, and then I'll click okay. And we got three rows, one column. And we now see it on our component. So again, if there's a more complex property, there's usually an editor or a way to manipulate that.

[04:06] Now you can also create your own properties on components. So if we go back to this label, it doesn't really matter which one we go to. If I were to right click on a component, I can go down to customizers, and there is this custom properties option. So if I select that, it gives me another little window here. And this basically allows you to define a property that will sit on the selected component and be available in the property editor. So if I hit the plus button here to add a new row, this will be foo. And for the type, we can actually double click on type. It's a dropdown. You can pick whatever type you'll want. You can type in a description if you want and hit enter. I'll click okay here. And we can see that it created foo as a custom property on this component. We can also see in the tool tip there that it's showing the description. So what's the point of creating custom property? Why would you wanna do this? Well, as you saw, the other properties directly impact what the component does. Whereas, custom properties don't. They're just an additional property you create that allows you to store information for later on.

[05:06] So you could store some number over here, or later on, you can add a binding, or add a script that changes the value of this and then reference it later from other components. So it's just kind of a way for you to store information on a component. Now, a common practice is actually, on the root container, add custom properties here. So I could, same rules, I could actually right click on the root container in the window over here. Go down to customizers and custom properties. And yeah, you can actually add custom properties to the root container. Later on, when we start talking about create our own navigation, this approach of adding custom properties to the root container is not only common, but we actually have some additional tools that allow you to pass information from the old window to the new window by using a custom property. But I'll just close that for now. And we should also talk a little bit about customizers. So I'm going to grab a multi-state button here. I'm going to drag that into our container.

[06:02] So this button here, if you haven't it seen before, it's just multiple buttons. Each button has a numerical state associated with it. Now you can actually add more buttons to it, but instead of showing that as a property in the property editor here, if you right click on the components, you go down to customizers, there will be, in some cases, for some components, usually the more complex components, there's a dedicated customizer for them. So if we select this, it gives us an additional window, which basically allows us to make modifications to this one component. So you won't find this on like the label or the slider. You'll only find it on this one component. But then components like tables, for example, or charts, will have their own customizers too. So from here, we can add a whole bunch of extra buttons with different states. We could change the text and the font on all the buttons and play around it there too. So the main takeaway is that some components do have additional customizers that you can find by right clicking. Now lastly, since we're talking about component properties, as a newer user, you might not know what a lot of these properties do.

[07:04] So you can actually hover over the name of a component. We saw that there's a tool tip. There's also a little description area. That's the third button from the left at the top of the property editor there. So if you toggle that, it has a little panel towards the bottom of it. And then if you left click on the name of a property, it'll show you some information, basically the tool tip for that component. So really useful. It saves you a step of having to go to the user manual though. The user manual usually has additional examples and information, but it's kind of just a nice little reminder or understanding of what exactly a property does, especially if you haven't seen it before. I should also mention too, especially for components that are a little bit larger in scope, when you have all these, when you have the filter set to all, you can actually sort these alphabetically. Sometimes, if you're looking for a certain thing, it's a little bit easier to just sort them alphabetically, instead of by category. And then kinda look through and just kinda skim by name. Now that's gonna about wrap up this video. I'm just kind of examining component properties here. Let's go ahead and I'm gonna reset this back to categorize. I'm gonna turn off the description here. We can leave the filter.

[08:01] And I will move this back to the lower left hand corner just because the other videos, we do typically leave the property editor in the lower left hand corner. But leave it wherever you'd like.